<script setup lang="ts">
	import { ComGridItemModel } from "../../types/com-grid-item"
	import { numString } from "../../utils/util"
	const props = defineProps({
		// 数据
		data: {
			type: Object,
			required: true
		},
		// 右下图标类型
		iconType: {
			type: String,
			required: true,
		},
		// 是否为直播
		customFooter: {
			type: Boolean,
			default: true
		},
		// 是否为直播
		live: {
			type: Boolean,
			default: false
		},
		// 是否为短剧
		miniMovie: {
			type: Boolean,
			default: false
		},
	})
	const data = props.data as ComGridItemModel
	const randomImg = `../../static/${props.data.image}`
	const avatar = `../../static/${props.data.avatar}`
	const randomText = data.title
	const author = data.author
	const num = data.num
</script>
<template>
	<view class="grid-container">
		<view class="cover">
			<image :src="randomImg" mode="aspectFill" class="img"></image>
			<view class="live-icon" v-if="live">
				<i class="iconfont icon-zhibo"></i>
				<text>直播中</text>
			</view>
			<view class="play-icon flex-center" v-if="miniMovie">
				<i class="iconfont icon-play"></i>
			</view>
		</view>
		<view class="title">{{randomText}}</view>
		<view class="bottom">
			<!-- 推荐 / 直播 -->
			<view class="author-container" v-if="customFooter">
				<view :class="{'avatar-living': live}">
					<image class="avatar" :src="avatar"></image>
				</view>
				<text class="username">{{author}}</text>
			</view>
			<view class="love-button" v-if="customFooter">
				<i :class="`iconfont ${iconType}`"></i>
				<view class="love">{{numString(data.num, 1)}}</view>
			</view>
			<!-- 短剧 -->
			<view class="mini-movie" v-if="miniMovie">
				<text>全{{data.all}}集 | {{data.type}} | {{numString(data.play, 0)}}播放</text>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	@import "@/static/font/iconfont.css";

	.grid-container {
		margin-bottom: 10rpx;

		.cover {
			position: relative;

			.img {
				width: 100%;
				height: 480rpx;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}

			.live-icon {
				padding: 6rpx 10rpx;
				color: white;
				font-size: $font-size-20;
				background-color: #656a6fcc;
				display: inline-block;
				border-radius: 20rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;

				.icon-zhibo {
					font-size: $font-size-20;
					margin-right: 6rpx;
					display: inline-block;
				}
			}

			.play-icon {
				border-radius: 100%;
				width: 33rpx;
				height: 33rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				background-color: #00000077;

				.icon-play {
					color: white;
					font-size: $font-size-28;
				}
			}
		}

		.title {
			background-color: white;
			padding: 5rpx 20rpx;
			font-size: $font-size-28;
		}

		.bottom {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: $font-size-28;
			color: gray;
			background-color: white;
			padding: 20rpx;

			.author-container {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 14rpx;

				.avatar {
					width: 35rpx;
					height: 35rpx;
					object-fit: cover;
					border-radius: 100%;
				}

				.avatar-living {
					padding: 2rpx;
					border: 2rpx solid red;
					border-radius: 100%;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
				}

				.avatar-living::after {
					position: absolute;
					content: "直播";
					color: white;
					background-color: red;
					font-size: $font-size-12;
					padding: 1rpx 4rpx 3rpx 4rpx;
					border-radius: 10rpx;
					margin-top: 30rpx;
				}

				.username {
					font-size: $font-size-24;
					margin-bottom: 7rpx;
				}
			}

			.love-button {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 5rpx;

				.love {
					font-size: $font-size-24;
				}
			}

			.iconfont {
				color: black;
			}

			.mini-movie {
				font-size: $font-size-24;
			}
		}
	}
</style>